<template>
  <view>
    <uv-popup ref="loginPhone" mode="center" round="10">
      <view class="runse-popup" style="width:600rpx;">
        <view style="font-size: 30rpx; display: flex;align-items: center;flex-wrap: wrap">
          是否授权获取微信小程序手机号快速登录
        </view>
        <view class="next uni-row" style="margin:60rpx 0 0 0;">
          <view style="flex:1;margin-right:10rpx">
            <uv-button type="primary" text="取消授权" plain @click="cancelSq"></uv-button>
          </view>
          <view style="flex:1;">
            <uv-button type="primary" text="确认授权" open-type="getPhoneNumber"  @getphonenumber="getPhoneNumber"></uv-button>
          </view>
        </view>
      </view>
    </uv-popup>
    <uni-popup type="bottom" ref="runse" :isMaskClick="false">
      <view class="runse-popup">
        <view class="runse-popup__header">
          <view class="ws-picker__title">
            你需要登录才能继续操作
          </view>
        </view>
        <view style="font-size: 26rpx; display: flex;align-items: center;flex-wrap: wrap">

          <view style="display: flex;align-content: center">
            <uv-checkbox-group @change="change">
              <uv-checkbox value="1" name="1" :checked="checked"></uv-checkbox>
            </uv-checkbox-group>
            <view style="text-align: justify" @click="change">
              我已阅读并接受
              <text style=" color: #4D80F0;text-decoration: underline;" @tap.stop="xieyi(1)">用户协议</text>
              、
              <text style="color: #4D80F0;text-decoration: underline;" @tap.stop="xieyi(3)">小程序隐私政策</text>
            </view>
          </view>
        </view>
        <view class="ws-privacy-popup__footer">
			<!-- #ifdef MP-WEIXIN -->
			<button class="is-agree" open-type="agreePrivacyAuthorization" :disabled="disabled"
			        @agreeprivacyauthorization="handleAgree">
			  立即登录
			</button>
			<!-- #endif -->
          <!-- #ifdef H5 -->
          <button class="is-agree"  :disabled="disabled" @click="h5login">
            立即登录
          </button>
          <!-- #endif -->
          <button class="is-disagree" id="disagree-btn" @click="handleDisagree">
            取消登录
          </button>
        </view>


      </view>
    </uni-popup>
  </view>
</template>

<script setup lang="ts">
import {wxLogin,wxLoginCode,wxLogin2} from '@/common/user'
import {
  ref,
  reactive,
  nextTick,
  onMounted,
  watch
} from 'vue'

const change = (e) => {
  checked.value = !checked.value
  if (checked.value) {
    disabled.value = false
  } else {
    disabled.value = true
  }
}
const h5login = () => {
  wxLogin2().then(r=>{
    if(r.code==200){
      userToken.setLogin(r.data)
      emit('clk')
      runse.value.close()
    }
  })
}
const getPhoneNumber = async(e) => {
  if (e.errMsg == "getPhoneNumber:ok") {
    uni.login({
      success(res) {
        uni.showLoading({
          title: '加载中',
          mask: true,
        })
        var code = res.code
        wxLoginCode({code:code}).then(r=>{
          let post = {
            encryptedData: e.encryptedData,
            iv: e.iv,
            session_key: r.data.session_key
          }
          wxLogin(post).then(r => {
            if(r.code==200){
              userToken.setLogin(r.data)
              userToken.setLogin(r.data)
              emit('clk')
              runse.value.close()
              loginPhone.value.close()
            }else{
              uni.showToast({
                title: '登录失败，请重试',
                icon: 'none'
              })
              uni.hideLoading()
            }
          }).catch(e=>{
            uni.showToast({
              title: '登录失败，请重试',
              icon: 'none'
            })
            uni.hideLoading()
          })
        }).catch( e=>{
          uni.showToast({
            title: '登录失败，请重试',
            icon: 'none'
          })
          uni.hideLoading()
        })
      }
    })
  } else {
    uni.showToast({
      title: '请允许获取手机号',
      icon: 'none'
    })
  }
}
const loginPhone = ref(null)
const disabled = ref(true)
const checked = ref(false)
const checkxy = () => {
  checked.value = true
}
const cancelSq = () => {
  loginPhone.value.close()
  uni.showToast({
    icon: 'none',
    title: '取消授权'
  })
}
const xieyi = (type) => {
  if (type == 1) {
    uni.navigateTo({
      url: '/pages/user/webview?src=https://wz.mala.cn/wechatApi.Webview/xieyi'
    })
  } else if (type == 2) {
    uni.navigateTo({
      url: '/pages/user/webview?src=https://wz.mala.cn/wechatApi.Webview/yinsi'
    })
  } else if (type == 3) {
    uni.openPrivacyContract({});
  }
}
const runse = ref(null)
import {
  useToken
} from "@/stores/userStores";
const emit = defineEmits(["clk"]);
const handleAgree = () => {
  loginPhone.value.open()
}
const userToken = useToken();

watch(checked, (n, o) => {
  if (n === true) {
    disabled.value = false
  }
})
const openBox = () =>{
  runse.value.open()
}
onMounted(() => {
  nextTick(() => {
    if (userToken.token) {
      runse.value?.close()
    } else {
      runse.value?.open()
    }
  })
})
const handleDisagree = () => {
  uni.switchTab({
    url: '/pages/index/index'
  })
}
//抛出openBox
defineExpose({
  openBox,
});
</script>


<style scoped lang="scss">
.ws-privacy-popup__footer {
  margin-top: 50rpx;
  display: flex;
  flex-direction: column;

  .is-disagree,
  .is-agree {
    width: 100%;
    height: 88rpx;
    background: #ffffff;
    border-radius: 44rpx;
    line-height: 88rpx;
    font-size: 32rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #666666;
  }

  .is-agree {
    background: #4D80F0;
    color: #ffffff;
    margin-bottom: 18rpx;

    &[disabled] {
      opacity: .5 !important;
    }
  }

  button {
    border: none;
    outline: none;

    &::after {
      border: none;
    }
  }
}

.runse-popup {
  padding: 48rpx;
  box-sizing: border-box;
  overflow: hidden;
  width: 100%;
  background: linear-gradient(180deg, #e5edff 0%, #ffffff 100%);
  border-radius: 24rpx;

  &__header {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 52rpx;
    font-size: 36rpx;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 550;
    color: #1a1a1a;
    line-height: 52rpx;
    margin-bottom: 48rpx;
  }
}
</style>
